<template>
  <div class="main-container">
    <div class="newsBox">
        <div class="left">
            <div class="share" id="share"><div class="title">分享</div></div>
            <ul>
                <li>
                    <a href="https://wx.qq.com/s" target="_blank">
                        <img src="/img/icon1.png" alt="">
                        <span>微信分享</span>
                    </a>
                </li>
                <li>
                    <a href="https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=https%3A%2F%2Fweibo.com%2F" target="_blank">
                        <img src="/img/icon2.png" alt="">
                        <span>新浪微博</span>
                    </a>
                </li>
                <li>
                    <a href="https://qzone.qq.com/" target="_blank">
                        <img src="/img/icon3.png" alt="">
                        <span>QQ空间</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/img/icon4.png" alt="">
                        <span>复制链接</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="center">

          <div class="zixunBox" v-for="(news, index) in newsList" :key="index">
            <div class="artical">
              <a href="javascript:;" @click="openDetail(news)">
                <div class="artical_image">
                  <img :src="news.img">
                </div>
              </a>
              <div class="artical_content">
                <a href="javascript:;" @click="openDetail(news)">
                  <div class="articalTitleDiv"><span>{{ news.title }}</span></div>
                  <p>{{ news.roundup }}</p>
                </a>
              </div>
            </div>

          </div>
        </div>
        <div class="right">
          <div class="titlePublic">
            <div class="left">
              <span class="title">大家都在搜</span>
            </div>
          </div>
          <ol class="guangBox">
            <li v-for="(news, index) in newsList" :key="index"><a href="javascript:;" @click="openDetail(news)">{{ news.title }}</a></li>
          </ol>
        </div>
    </div>
  </div>
</template>
<script>
import { listNews } from '@/api/news'

export default  {
  name: 'News',
  data() {
    return {
      newsList: []
    }
  },
  created() {
    this.getNewsList()
  },
  methods: {
    getNewsList() {
      listNews().then(res => {
        this.newsList = res.data
      })
    },
    openDetail(news) {
      const news_id = news.news_id
      this.$router.push({
        path: '/news/' + news_id + '/detail'
      })
    },
  }
}
</script>
